<template>
	<!--基础管理-->
	<div class="mastermanage">
		<div class="tab-nav">
			<div class="leftnav" v-bind:class="{ check: oneitemcheck }" @click="itemclick(1)"><span v-bind:class="{ check: oneitemcheck }">权限管理</span></div>
			<div class="sanjiao" v-bind:class="{ checksanjiao: oneitemcheck }"></div>
			<div class="leftnav" @click="itemclick(2)" v-bind:class="{ check: twoitemchekc }"><span v-bind:class="{ check: twoitemchekc }">部门管理</span></div>
			<div class="sanjiao" v-bind:class="{ checksanjiao: twoitemchekc }"></div>
			<div class="leftnav" @click="itemclick(3)" v-bind:class="{ check: threeitemchekc }"><span v-bind:class="{ check: threeitemchekc }">考勤记录</span></div>
			<div class="sanjiao" v-bind:class="{ checksanjiao: threeitemchekc }"></div>
		</div>

		<div class="mastermanage-body">
			<dptmanage v-if="dptdate"></dptmanage>
			<workdaterecords v-if="worddate"></workdaterecords>
		</div>
	</div>
</template>

<script>
	import workdaterecords from '@/components/workdatereords.vue'
	import dptmanage from '@/components/dptmanage.vue'
	export default {
		name: "mastermanage",
		components: {
			workdaterecords,dptmanage
		},
		data() {
			return {
				oneitemcheck:true,
				twoitemchekc:false,
				threeitemchekc:false,
				worddate:false,
				dptdate:false
			}
		},
		mounted() {
		},
		computed: {},
		watch: {},
		methods: {
			itemclick(index){
				if(index === 1){
					this.oneitemcheck = true;
					this.twoitemchekc = false;
					this.threeitemchekc = false;
					this.dptdate = false;
					this.worddate = false;
				}else if(index === 2){
					this.oneitemcheck = false;
					this.twoitemchekc = true;
					this.threeitemchekc = false;
					this.dptdate = true;
					this.worddate = false;
				}else{
					this.oneitemcheck = false;
					this.twoitemchekc = false;
					this.threeitemchekc = true;
					this.dptdate = false;
					this.worddate = true;
				}
			},
		},
		props: []
	}
</script>

<style scoped lang="less">
	@import '../assets/less/uiless.less';
	.mastermanage{
		display: flex;
		flex-basis: 0;
		.compents_ui();
		.tab-nav{
			.compents_tabnav();
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-basis: 0;
			span{
				color:#ffffff33;
				display: inline-block;
				width: 20px;
				padding: 0 4px;
			}
			.leftnav{
				border:1px solid;
				border-color: @bordcolor transparent transparent @bordcolor;
				background-color: rgba(19,62,117,.3);
			}
			.sanjiao{
				.sanjiao_draw();
			}
			.check{
				background-color: rgba(19,62,117,.8);
				color:white;
			}
			.checksanjiao{
				border-color:rgba(19,62,117,.8) rgba(19,62,117,.8) transparent transparent;
			}
		}
		.mastermanage-body{
			.compents_tablayout();
			padding: 0 !important;
		}
	}
</style>